import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Heart, Music, Sparkles, Flower2, Star } from 'lucide-react';

const LoveFireworks = () => {
  const [particles, setParticles] = useState([]);
  const [romanticQuotes] = useState([
    "你是我夜空中的烟花",
    "爱是一个灵魂居住在两个身体里",
    "你身体的每一个原子对我来说都像我自己的那样珍贵",
    "和我一起慢慢变老，最美好的还在后头"
  ]);
  const [currentQuote, setCurrentQuote] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const canvasRef = useRef(null);
  const audioRef = useRef(null);

  const colors = ['#FFB6C1', '#FF69B4', '#FF1493', '#E6B8FF', '#FF8C00'];

  const createParticle = (x, y) => {
    const angle = Math.random() * Math.PI * 2;
    const velocity = 2 + Math.random() * 3;
    const size = 3 + Math.random() * 5;
    const lifetime = 100 + Math.random() * 50;

    return {
      x,
      y,
      vx: Math.cos(angle) * velocity,
      vy: Math.sin(angle) * velocity,
      size,
      color: colors[Math.floor(Math.random() * colors.length)],
      lifetime,
      age: 0
    };
  };

  const createHeart = (x, y) => {
    const newParticles = [];
    for (let i = 0; i < 50; i++) {
      newParticles.push(createParticle(x, y));
    }
    setParticles(prev => [...prev, ...newParticles]);
  };

  const handleClick = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    createHeart(x, y);
    
    // Change quote on click
    setCurrentQuote((prev) => (prev + 1) % romanticQuotes.length);
    
    // Play sound if enabled
    if (!isPlaying && audioRef.current) {
      setIsPlaying(true);
      audioRef.current.currentTime = 0;
      audioRef.current.play();
    }
  };

  const updateParticles = () => {
    setParticles(prev => 
      prev
        .map(p => ({
          ...p,
          x: p.x + p.vx,
          y: p.y + p.vy,
          vy: p.vy + 0.05, // gravity
          age: p.age + 1,
          size: p.size * 0.99 // shrink slightly
        }))
        .filter(p => p.age < p.lifetime)
    );
  };

  useEffect(() => {
    const interval = setInterval(updateParticles, 16);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    // Initial fireworks
    const timer = setTimeout(() => {
      createHeart(window.innerWidth / 2, window.innerHeight / 2);
    }, 500);

    return () => clearTimeout(timer);
  }, []);

  const toggleMusic = () => {
    setIsPlaying(!isPlaying);
    if (!isPlaying && audioRef.current) {
      audioRef.current.play();
    } else if (audioRef.current) {
      audioRef.current.pause();
    }
  };

  return (
    <div 
      className="relative w-full h-screen overflow-hidden bg-gradient-to-br from-pink-200 to-purple-300 font-sans"
      onClick={handleClick}
    >
      {/* Hidden audio element */}
      <audio ref={audioRef} autoPlay src="/music.mp3" loop />

      {/* Floating decorative elements */}
      <motion.div 
        className="absolute top-1/4 left-1/4 text-pink-500"
        animate={{
          y: [0, -20, 0],
          rotate: [0, 5, -5, 0]
        }}
        transition={{
          duration: 8,
          repeat: Infinity,
          repeatType: 'reverse'
        }}
      >
        <Flower2 size={48} />
      </motion.div>

      <motion.div 
        className="absolute top-1/3 right-1/4 text-purple-500"
        animate={{
          y: [0, -15, 0],
          rotate: [0, -5, 5, 0]
        }}
        transition={{
          duration: 7,
          repeat: Infinity,
          repeatType: 'reverse',
          delay: 1
        }}
      >
        <Star size={40} />
      </motion.div>

      {/* Main content */}
      <div className="absolute inset-0 flex flex-col items-center justify-center z-10 pointer-events-none">
        <motion.h1 
          className="text-5xl md:text-6xl font-bold mb-6 text-pink-700 font-pattaya"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
          空气中弥漫着爱
        </motion.h1>

        <motion.p 
          className="text-2xl md:text-3xl italic text-center max-w-2xl px-4 text-pink-800 font-playball"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5, duration: 1 }}
          key={currentQuote}
        >
          {romanticQuotes[currentQuote]}
        </motion.p>

        <motion.p 
          className="mt-8 text-lg text-pink-700"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1, duration: 1 }}
        >
          点击任意位置，开启魔法
        </motion.p>
      </div>

      {/* Particles */}
      <div className="absolute inset-0 overflow-hidden">
        {particles.map((p, i) => (
          <motion.div
            key={i}
            className="absolute rounded-full"
            style={{
              left: p.x,
              top: p.y,
              width: p.size,
              height: p.size,
              backgroundColor: p.color,
              boxShadow: `0 0 ${p.size}px ${p.size/2}px ${p.color}`
            }}
            initial={{ opacity: 1 }}
            animate={{ opacity: [1, 0.8, 0] }}
            transition={{ duration: p.lifetime/100 }}
          />
        ))}
      </div>
    </div>
  );
};

export default LoveFireworks;